<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :bgColorStyle="theme">
			<block slot="backText">{{$t("返回")}}</block>
			<block slot="content">高级查询</block>
		</cu-custom>
		<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]">
			<view @tap="navTo(item.id)" class="cu-list menu" v-for="(item,index) in list" style="margin-top:0;border-top: 1px solid #eee;">
				<view class="cu-item">
					<view class="content">
						<text :style="{color:theme}" class="cuIcon-tagfill margin-right-xs"></text>
						<text class="text-grey">{{item.testInput}}</text>
					</view>
					<text @tap.stop="optionsClick(item.id)" style="font-size:20px" class='text-gray cuIcon-more margin-right-xs'></text>
				</view>
			</view>
		</scroll-view>
		<js-search-bottom :count="count" searchUrl="/pages/basics/listSearch" 
		sortUrl="/pages/basics/listSort" :searchModel="searchModel" :sortModel="sortModel">
		</js-search-bottom>
		<view class="cu-modal" :class="modalName=='options'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
					<view class="cu-list menu text-left">
						<view class="cu-item" @tap.stop="editThis">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub"><text :style="{color:theme}" class="cuIcon-edit margin-right-xs"></text>修改</view>
							</label>
						</view>
						<view class="cu-item" @tap.stop="deleteThis">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub"><text class="text-red cuIcon-delete margin-right-xs"></text>删除</view>
							</label>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				keywords: '',
				query: {
					pageNo: 1,
					pageSize: 20
				},
				CustomBar: this.CustomBar,
				list: [],
				count: 0,
				loadStatus: 'loadmore',
				modalName:"",
				currentId:"",
				searchModel:{},
				sortModel:{}
			};
		},
		onLoad() {
			let _this = this
			uni.removeStorage({
			    key: 'list_test_search',
			    success: (res)=> {
					uni.removeStorage({
					    key: 'list_test_order',
					    success: function (res) {
					        _this.loadList();
					    }
					});
			    }
			});
			
		},
		computed: {
			...mapState(["theme"])
		},
		onShow() {
			this.query = {
				pageNo: 1,
				pageSize: 20
			}
			this.list = []
			this.searchModel = {}
			this.sortModel = {}
			this.loadSearchModel()
		},
		methods: {
			loadMore() {
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadList();
				}, 100);
			},
			loadSearchModel(){
				let _this = this
				uni.getStorage({
				    key: 'list_test_search',
				    success(res){
						_this.searchModel = res.data
						_this.loadSortModel(res.data)
					},
					fail(res){
						_this.loadSortModel({})
					}
				})
			},
			loadSortModel(data){
				let _this = this
				uni.getStorage({
				    key: 'list_test_order',
				    success(res){
						_this.sortModel = res.data
						let arr = []
						let obj = {}
						Object.getOwnPropertyNames(_this.sortModel).forEach(function(key) {
							if (typeof _this.sortModel[key] === 'string') {
								if (_this.sortModel[key] != '' && _this.sortModel[key] != null) {
									arr.push(_this.sortModel[key])
								}
							}
						});
						obj["orderBy"] = arr.join(",")
						_this.loadList(Object.assign({}, obj, data))
					},
					fail(res){
						_this.loadList(data)
					}
				})
			},
			loadList(data){
				  this.$request({
					url: "a/test/testData/listData",
					data: Object.assign({},this.query,data),
					success:(res)=>{
						if (!res.data.list || res.data.list.length == 0){
							setTimeout(()=>{
								uni.showToast({
									icon: 'none',
									title: '没有更多数据了'
								});
							},200)
							this.loadStatus = "nomore";
							return;
						}
						this.list = this.list.concat(res.data.list);
						this.count = res.data.count;
						this.query.pageNo = res.data.pageNo;
						this.query.pageSize = res.data.pageSize;
						this.loadStatus = "loadmore";
					}
				  })
			},
			/* loadList(val) {
				let _this = this
				uni.getStorage({
				    key: 'list_test_search',
				    success(res){
						_this.searchModel = res.data
						  _this.$request({
							url: "a/test/testData/listData",
							data: Object.assign({},_this.query,res.data),
							success:(res)=>{
								if (!res.data.list || res.data.list.length == 0){
									setTimeout(()=>{
										uni.showToast({
											icon: 'none',
											title: '没有更多数据了'
										});
									},200)
									_this.loadStatus = "nomore";
									return;
								}
								_this.list = _this.list.concat(res.data.list);
								_this.count = res.data.count;
								_this.query.pageNo = res.data.pageNo;
								_this.query.pageSize = res.data.pageSize;
								_this.loadStatus = "loadmore";
							}
						  })
				    },
					fail() {
						_this.$request({
							url: "a/test/testData/listData",
							data: _this.query,
							success:(res)=>{
								if (!res.data.list || res.data.list.length == 0){
									setTimeout(()=>{
										uni.showToast({
											icon: 'none',
											title: '没有更多数据了'
										});
									},200)
									_this.loadStatus = "nomore";
									return;
								}
								_this.list = _this.list.concat(res.data.list);
								_this.count = res.data.count;
								_this.query.pageNo = res.data.pageNo;
								_this.query.pageSize = res.data.pageSize;
								_this.loadStatus = "loadmore";
							}
						})
					}
				});
				
			}, */
			optionsClick(id) {
				this.currentId = id
				this.modalName = "options"
			},
			search(value) {
				this.list = [];
				this.query.pageNo = 0;
				this.query.testInput = value;
				this.loadList();
			},
			navTo(id) {
				uni.showModal({
					title: id,
					content: id,
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			editThis(){
				this.modalName = ''
				uni.showModal({
					title: this.currentId,
					content: this.currentId,
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {
						this.modalName = ""
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteThis(){
				this.modalName = ''
				uni.showModal({
					title: '提示',
					content: '确认删除这条数据',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						this.modalName = ""
						if(res.confirm) {
							this.modalName = ""
							this.$request({
								url: "a/test/testData/delete",
								data: {
									id: this.currentId
								},
								success:(res)=>{
									uni.showModal({
										title: '提示',
										content: res.data.message,
										showCancel: false,
										cancelText: '取消',
										confirmText: '确认',
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideModal(){
				this.modalName = ""
			}
		}
	};
</script>

<style scoped>
	.page{
		
		background-color: white;
	}
	.circle {
		position: fixed;
		border-radius: 50%;
		width: 100upx;
		height: 100upx;
		font-size: 60upx;
		bottom: 40upx;
		right: 40upx;
		z-index: 999;
	}
</style>
